.koo-slider-block {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 5px solid var(--koo-blue-4);
  background-color: var(--koo-gray-1);
  top: -5px;
  border-radius: 100%;
  position: absolute;
  overflow: hidden;

  &:hover {
    cursor: pointer;
    border: 6px solid var(--koo-blue-5);
    left: -10px;
  }
}

.koo-slider-block-vertical {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 5px solid var(--koo-blue-4);
  background-color: var(--koo-gray-1);
  left: -5px;
  border-radius: 100%;
  position: absolute;
  overflow: hidden;

  &:hover {
    cursor: pointer;
    border: 6px solid var(--koo-blue-5);
  }
}

.koo-slider {
  height: 10px;
  position: relative;
  display: inline-block;
  cursor: help;

  &:hover {
    cursor: pointer;
  }
}

.koo-slider-vertical {
  width: 10px;
  position: relative;
  display: inline-block;
  cursor: help;

  &:hover {
    cursor: pointer;
  }
}

.koo-slider-disable {
  &:hover {
    cursor: not-allowed;
  }

  .koo-slider-long {
    background-color: var(--koo-gray-7);
  }

  .koo-slider-long-vertical {
    background-color: var(--koo-gray-7);
  }

  .koo-slider-block {
    border: 5px solid var(--koo-gray-7);

    &:hover {
      cursor: not-allowed;
    }
  }

  .koo-slider-block-vertical {
    border: 5px solid var(--koo-gray-7);

    &:hover {
      cursor: not-allowed;
    }
  }
}

.koo-slider-text {
  position: absolute;
  top: -30px;
  user-select: none;
  height: 20px;
  background-color: black;
  color: white;
  border-bottom: solid 5px black;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
}

.koo-slider-text-vertical {
  position: absolute;
  left: 20px;
  user-select: none;
  height: 20px;
  background-color: black;
  color: white;
  border-bottom: solid 5px black;
  border-radius: 5px;
}

.koo-slider-short-left {
  height: 10px;
  width: 10px;
  border-bottom-left-radius: 1rem;
  border-top-left-radius: 1rem;
  position: absolute;
  display: inline-block;
  background-color: var(--koo-gray-5);
}

.koo-slider-short-top {
  // 垂直中的 上半short
  height: 10px;
  width: 10px;
  border-top-right-radius: 1rem;
  border-top-left-radius: 1rem;
  position: absolute;
  display: inline-block;
  background-color: var(--koo-gray-5);
}

.koo-slider-long {
  height: 10px;
  position: absolute;
  display: inline-block;
  border-bottom-left-radius: 1rem;
  border-top-left-radius: 1rem;
  background-color: var(--koo-blue-4);
}

.koo-slider-long-vertical {
  // 垂直中的选中
  width: 10px;
  height: 10px;
  position: absolute;
  display: inline-block;
  border-top-right-radius: 1rem;
  border-top-left-radius: 1rem;
  background-color: var(--koo-blue-4);
}

.koo-slider-short-right {
  height: 10px;
  border-bottom-right-radius: 1rem;
  border-top-right-radius: 1rem;
  position: absolute;
  display: inline-block;
  background-color: var(--koo-gray-5);
}

.koo-slider-short-bottom {
  // 垂直中的下半short
  width: 10px;
  border-bottom-right-radius: 1rem;
  border-bottom-left-radius: 1rem;
  position: absolute;
  display: inline-block;
  background-color: var(--koo-gray-5);
}
